<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="iamge/标志.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer这个标签仅仅用于占位，把这几个a标签挤到最右边去 -->
        <div class="spacer"></div>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>


    <!-- 页面主体部分 -->
    <div class="container">
        <!-- 左侧边信息 -->
        <div class="container-left">
            <!-- 此处引入card类，是为了只是显示用户信息的部分（如背景，若是选container-left ，则背景颜色就是和父级元素一样高了） -->
            <div class="card">
                <img src="iamge/宝儿姐.jpg" alt="">
                <h3>宝儿姐的贴身保镖</h3>
                <a class="link" href="https://www.baidu.com/" target="_blank">github地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>    
            </div>
        </div>
            
        <!-- 右侧边信息 -->
        <div class="container-right">
            <div class="blog">
                <!-- 博客标题 -->
                <h2>我的第一篇博客</h2>
                <!-- 博客时间 -->
                <div class="date">2022-5-8</div>
                <!-- 博客详情 -->
                <div class="desc">
                    Lorem ipsum dolor 
                    sit amet consectetur adipisicing
                     elit. Tempora atque cupiditate dolore beatae deleniti unde ad repudiandae temporibus sint quasi consequuntur, cum eum nostrum fugiat fuga ab iusto commodi accusamus.
                </div>
                <!-- 查看全文按钮  > 用 &gt; 表示-->
                <a href="https://blog.csdn.net/Jin__Wang/article/details/129401676?spm=1001.2014.3001.5501" target="_blank">查看全文 &gt;&gt;</a>



                <!-- 博客标题 -->
                <h2>我的第er篇博客</h2>
                <!-- 博客时间 -->
                <div class="date">2022-5-8</div>
                <!-- 博客详情 -->
                <div class="desc">
                    Lorem ipsum dolor 
                    sit amet consectetur adipisicing
                     elit. Tempora atque cupiditate dolore beatae deleniti unde ad repudiandae temporibus sint quasi consequuntur, cum eum nostrum fugiat fuga ab iusto commodi accusamus.
                </div>
                <!-- 查看全文按钮  > 用 &gt; 表示-->
                <a href="https://blog.csdn.net/Jin__Wang/article/details/129401676?spm=1001.2014.3001.5501" target="_blank">查看全文 &gt;&gt;</a>



                <!-- 博客标题 -->
                <h2>我的第三篇博客</h2>
                <!-- 博客时间 -->
                <div class="date">2022-5-8</div>
                <!-- 博客详情 -->
                <div class="desc">
                    Lorem ipsum dolor 
                    sit amet consectetur adipisicing
                     elit. Tempora atque cupiditate dolore beatae deleniti unde ad repudiandae temporibus sint quasi consequuntur, cum eum nostrum fugiat fuga ab iusto commodi accusamus.
                </div>
                <!-- 查看全文按钮  > 用 &gt; 表示-->
                <a href="https://blog.csdn.net/Jin__Wang/article/details/129401676?spm=1001.2014.3001.5501" target="_blank">查看全文 &gt;&gt;</a>



                 <!-- 博客标题 -->
                 <h2>我的第三篇博客</h2>
                 <!-- 博客时间 -->
                 <div class="date">2022-5-8</div>
                 <!-- 博客详情 -->
                 <div class="desc">
                     Lorem ipsum dolor 
                     sit amet consectetur adipisicing
                      elit. Tempora atque cupiditate dolore beatae deleniti unde ad repudiandae temporibus sint quasi consequuntur, cum eum nostrum fugiat fuga ab iusto commodi accusamus.
                 </div>
                 <!-- 查看全文按钮  > 用 &gt; 表示-->
                 <a href="https://blog.csdn.net/Jin__Wang/article/details/129401676?spm=1001.2014.3001.5501" target="_blank">查看全文 &gt;&gt;</a>

                 

                  <!-- 博客标题 -->
                <h2>我的第三篇博客</h2>
                <!-- 博客时间 -->
                <div class="date">2022-5-8</div>
                <!-- 博客详情 -->
                <div class="desc">
                    Lorem ipsum dolor 
                    sit amet consectetur adipisicing
                     elit. Tempora atque cupiditate dolore beatae deleniti unde ad repudiandae temporibus sint quasi consequuntur, cum eum nostrum fugiat fuga ab iusto commodi accusamus.
                </div>
                <!-- 查看全文按钮  > 用 &gt; 表示-->
                <a href="https://blog.csdn.net/Jin__Wang/article/details/129401676?spm=1001.2014.3001.5501" target="_blank">查看全文 &gt;&gt;</a>


                 <!-- 博客标题 -->
                 <h2>我的第三篇博客</h2>
                 <!-- 博客时间 -->
                 <div class="date">2022-5-8</div>
                 <!-- 博客详情 -->
                 <div class="desc">
                     Lorem ipsum dolor 
                     sit amet consectetur adipisicing
                      elit. Tempora atque cupiditate dolore beatae deleniti unde ad repudiandae temporibus sint quasi consequuntur, cum eum nostrum fugiat fuga ab iusto commodi accusamus.
                 </div>
                 <!-- 查看全文按钮  > 用 &gt; 表示-->
                 <a href="https://blog.csdn.net/Jin__Wang/article/details/129401676?spm=1001.2014.3001.5501" target="_blank">查看全文 &gt;&gt;</a>
 
            </div>
        </div>
    </div>
</body>
</html>